import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutterdemo/0demo/provider/02my_demo/provider_data/common_data.dart';
import 'package:flutterdemo/0demo/ui/advanced_seek_bar/src/seekbar.dart';
import 'package:flutterdemo/0demo/ui/seek_bar/seekbar/seekbar.dart';
import 'package:provider/provider.dart';

class TabViewWidget1 extends StatefulWidget {
  @override
  _TabViewWidget1State createState() => _TabViewWidget1State();
}

class _TabViewWidget1State extends State<TabViewWidget1> with AutomaticKeepAliveClientMixin {
  UserModel userModel;

  double value = 0;

  double valueC = 0;

  @override
  Widget build(BuildContext context) {
    print("page 1 build");
    userModel = context.select((CommonData commonData) => commonData.userModel);
//    userModel = context.watch<CommonData>().userModel;
    return Container(
      padding: EdgeInsets.all(20.w),
      child: Card(
        child: Column(
          children: <Widget>[
            Text(_getLatestUserInfo()),
            FlatButton(
              onPressed: _changeUserModel,
              child: Text("修改UserModel"),
            ),
            const SizedBox(height: 100),
            Container(
              padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
              width: 200,
              child: SeekBar(
                progresseight: 5,
                value: 20,
              ),
            ),
            const SizedBox(height: 100),
            Container(
              width: 200,
              child: AdvancedSeekBar(
                Colors.grey,
                15,
                Colors.blue,
                lineHeight: 10,
                defaultProgress: 0,
                scaleWhileDrag: true,
                percentSplitWidth: 1,
                seekBarStarted: () {},
                seekBarProgress: (v) {},
                seekBarFinished: (v) {},
                fillProgress: true,
              ),
            ),
            const SizedBox(height: 30),
            // https://www.jianshu.com/p/c8969df96d9e
            // 之所以写在这里是为了看滑动冲突，第一个不行，还是slider好用
            Container(
              width: 200,
              padding: const EdgeInsets.all(0),
              color: Colors.red,
              child: Transform.scale(
                scale: 0.8,
                child: SliderTheme(
                  data: SliderThemeData(
                    trackHeight: 10,
                    // activeTrackColor: Colors.red,
                    // inactiveTrackColor: Colors.grey,
                    // disabledActiveTrackColor: Colors.yellow,
                    // disabledInactiveTrackColor: Colors.cyan,
                    // activeTickMarkColor: Colors.black,
                    // inactiveTickMarkColor: Colors.red,
                    // overlayColor: Colors.yellow,
                    // overlappingShapeStrokeColor: Colors.black,
                    // overlayShape: RoundSliderOverlayShape(),
                    // valueIndicatorColor: Colors.red,
                    // showValueIndicator: ShowValueIndicator.onlyForDiscrete,
                    // minThumbSeparation: 100,
                    rangeTrackShape: RoundedRectRangeSliderTrackShape(),
                  ),
                  child: Slider(
                    // label: 'Slider111',
                    max: 1,
                    min: 0,
                    // divisions: 5,
                    activeColor: Colors.blue,
                    inactiveColor: Colors.grey,
                    value: this.value,
                    onChanged: (double v) {
                      setState(() {
                        this.value = v;
                      });
                    },
                    // disable不可滑动
                    // onChanged: null,
                    onChangeStart: (double startValue) {
                      print('Started change at $startValue');
                    },
                    onChangeEnd: (double newValue) {
                      print('Ended change on $newValue');
                    },
                    semanticFormatterCallback: (double newValue) {
                      return '${newValue.round()} dollars';
                    },
                  ),
                ),
              ),
            ),
            const SizedBox(height: 30),
            CupertinoSlider(
              value: this.valueC,
              onChanged: (double v) {
                setState(() {
                  this.valueC = v;
                });
              },
            ),
          ],
        ),
      ),
    );
  }

  String _getLatestUserInfo() {
    return userModel == null ? "null" : userModel.toString();
  }

  void _changeUserModel() {
    context.read<CommonData>().changeUserModel();
  }

  @override
  bool get wantKeepAlive => true;
}
